<template>
  <view class="number-flip-container">
    <view v-for="(item, index) in integer" :key="index" class="number-item">
      {{ item }}
    </view>
    <view class="dot"></view>
    <view v-for="(item, index) in decimal" :key="index" class="number-item">
      {{ item }}
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps } from "vue";

const props = defineProps({
  value: {
    type: [Number, String],
    default: 0,
  },
});

// 整数（不够 8 位补到 8 位）
const integer = computed(() => {
  const num = Math.floor(Number(props.value));
  return String(num).padStart(8, "0");
});

// 小数 （不够 2 位补到 2 位）
const decimal = computed(() => {
  const num = Number(props.value).toFixed(2);
  return num.split(".")[1].padEnd(2, "0");
});
</script>

<style lang="scss" scoped>
.number-flip-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-sizing: border-box;
  .number-item {
    width: 58rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 56rpx;
    background-color: #fefaec;
    box-sizing: border-box;
    border: 1px solid #ffab00;
  }
  .dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #000;
    border-radius: 50%;
    margin-top: 35rpx;
  }
}
</style>
